<template>
    <el-tree
            accordion
            draggable
            :data="file.files"
            :props="defaultProps"
            node-key="file.fileId"
            :highlight-current="true"
            empty-text="No Data"
            @node-click="nodeClick"
            @node-contextmenu="openMenu"
    >
        <template #default="{node,data}">
            <FileLabel :file="node.data.file" v-contextmenu:fileToolMenu/>
        </template>
    </el-tree>
    <v-contextmenu ref="fileToolMenu">
        <v-contextmenu-item @click="openFile">
            打开
        </v-contextmenu-item>
        <v-contextmenu-item>
            新建
        </v-contextmenu-item>
        <v-contextmenu-item>
            复制
        </v-contextmenu-item>
        <v-contextmenu-item>
            粘贴
        </v-contextmenu-item>
        <v-contextmenu-item>
            重命名
        </v-contextmenu-item>
        <v-contextmenu-item>
            删除
        </v-contextmenu-item>
        <v-contextmenu-item>
            详细信息
        </v-contextmenu-item>
    </v-contextmenu>
</template>

<script setup lang="ts">

import {ref} from "vue";
import {useFileStore} from "../../store/filesTool";
import FileLabel from "./FileLabel.vue";
import {useLeftToolStore} from "../../store/leftTool";
import {useRouter} from "vue-router";
import {useWindowsStore} from "../../store/windows";
import {type} from "../../model/type";


const fileToolMenu = ref()
const file = useFileStore()
const fileTool = useFileStore()
const tool = useLeftToolStore()
const router = useRouter()
const labels = useWindowsStore()


function GetSize(width: number, height: number) {
    console.log('size:', width)
    fileTool.UpdateMaxWidth(width)
}

function nodeClick() {
    // 单机左键 取消菜单选项
    fileToolMenu.value.hide()
}

function openMenu(event, data, node, files) {
    // 更新当前菜单操作的文件对象
    file.UpdateCtx(data)
}

function openFile() {
    let ctx = fileTool.ctx;
    if (ctx.file.fileType === 1) {
        return
    }
    let path: string = tool.ctx.path + ctx.file.filePath
    router.push(path)
    let win = new type.WindowLabel(path, ctx.file.fileName, 2, true)
    labels.UpdateWindow(win)
}


const trees: type.FileNode[] = [
    {
        file: {
            // 文件id
            fileId: 1,
            // 文件名
            fileName: 'test',
            // 文件类型
            fileType: 1,
            // 文件路径,一般都是当前所在目录
            filePath: '/',
            // 更新时间
            updateTime: '',
            // 文件大小
            fileSize: 0,
        },
        children: [
            {
                file: {
                    // 文件id
                    fileId: 2,
                    // 文件名
                    fileName: '啊实打实大了付款了饭卡拉夫',
                    // 文件类型
                    fileType: 2,
                    // 文件路径,一般都是当前所在目录
                    filePath: '/test/test',
                    // 更新时间
                    updateTime: '',
                    // 文件大小
                    fileSize: 0,
                },
                children: []
            },
        ]
    }
]
file.setFiles(trees)
const defaultProps = {
    children: 'children',
    label: 'label',
    class:nodeClass
}

/*
* 实现根据不同节点选择添加不同的样式类名
* */
function nodeClass(data, node) {
    if (data.file.fileType === 1) {
        return 'file-folder'
    } else {
        return 'file-empty'
    }
}
</script>

<style>
.el-tree-node__content {
    cursor: default;
}

.file-folder > .el-tree-node__content {
    color: #3967FF;
}
</style>